// 在 Webpack 中集成 Babel 是非常常见的操作，用于将现代 JavaScript（如 ES6+、React JSX、TypeScript 等）
// 转译为兼容性更好的 JavaScript。

✅ 一、基本目标
    让 Webpack 使用 babel-loader 来处理 JS/JSX/TS 等文件，通过 Babel 转译代码。

✅ 二、安装依赖
        npm install --save-dev babel-loader @babel/core @babel/preset-env

    如果你使用 React，还需要：
        npm install --save-dev @babel/preset-react

    如果你使用 TypeScript，还需要：
        npm install --save-dev @babel/preset-typescript

✅ 三、配置 .babelrc 或 babel.config.js
    你可以用两种方式之一配置 Babel：

    ✅ .babelrc 文件
    {
        "presets": ["@babel/preset-env"]
    }

    ✅ babel.config.js（支持更多高级功能）
    module.exports = {
        presets: [
            ['@babel/preset-env', {
            targets: 'defaults', // 或 '> 0.25%, not dead'
            }],
            '@babel/preset-react', // 如使用 React
        ],
    };

✅ 四、配置 webpack.config.js
    const path = require('path');

    module.exports = {
        mode: 'development', // 或 production
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        module: {
            rules: [
            {
                test: /\.m?js$/, // 或 /\.jsx?$/ 处理 JSX
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            ],
        },
    };

    如果你使用 .ts 或 .tsx，还可以添加
    {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
        },
    }



